<template>
  <div class="app-container">
    <div class="search-wrapper">
      <el-form :inline="true" :model="queryParams" ref="queryRef">
        <el-form-item prop="rechargeNumber" style="width: 200px">
          <el-input
            v-model="queryParams.rechargeNumber"
            placeholder="请输入订单编号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="rechargeMethod">
          <el-select
            clearable
            v-model="queryParams.rechargeMethod"
            placeholder="请选择充值方式"
            style="width: 200px"
          >
            <el-option
              v-for="item in bus_recharge_method"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item prop="rechargeStatus">
          <el-select
            clearable
            v-model="queryParams.rechargeStatus"
            placeholder="请选择充值状态"
            style="width: 200px"
          >
            <el-option
              v-for="item in bus_recharge_status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="approvalStatus">
          <el-select
            clearable
            v-model="queryParams.approvalStatus"
            placeholder="请选择审批状态"
            style="width: 200px"
          >
            <el-option
              v-for="item in bus_approval_status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="text" @click="handleSearch"> 查询 </el-button>
          <el-button type="info" link @click="resetSearch"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :loading="loading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column prop="rechargeNumber" label="订单号" min-width="140" />
      <el-table-column prop="createTime" label="提交申请时间" min-width="140" />
      <el-table-column
        prop="rechargePrice"
        label="汇款金额(￥)"
        min-width="160"
      />
      <el-table-column
        prop="remitPrice"
        :label="`充值金额(${selectDictLabel(
          bus_currency_type,
          getCoinType()
        )})`"
        width="120"
      />
      <el-table-column
        prop="currencyServicePrcie"
        :label="`服务费(${selectDictLabel(bus_currency_type, getCoinType())})`"
        width="120"
      />
      <el-table-column prop="harvestAccountName" label="收款账户" width="140" />
      <el-table-column prop="remitName" label="汇款名称" width="140" />
      <el-table-column prop="rechargeMethod" label="充值类型" width="100">
        <template #default="scope">
          <dict-tag
            :options="bus_recharge_method"
            :value="scope.row.rechargeMethod"
          />
        </template>
      </el-table-column>
      <el-table-column prop="approvalStatusDesc" label="到账状态" width="140">
      </el-table-column>
      <el-table-column prop="rechargeStatusDesc" label="充值状态" width="140">
      </el-table-column>
      <el-table-column prop="updateTime" label="充值到账时间" width="140" />
      <el-table-column label="操作" width="140" fixed="right">
        <template #default="scope">
          <el-button
            type="primary"
            size="mini"
            link
            v-if="scope.row.approvalStatus === 'N'"
            @click="applyInvoice(scope.row)"
            >申请开票</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pager-wrapper">
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getTableData"
      />
    </div>
    <applyInvoiceDialog
      v-model:value="visible"
      :id="recordId"
      :money="rechargeMoney"
      v-if="visible"
      @on-success="getTableData"
    ></applyInvoiceDialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getCustomerRechargeList } from "@/api/customer_handle/index.js";
import applyInvoiceDialog from "./apply-invoice-dialog.vue";
import { getCoinType } from "@/utils//auth.js";
import { selectDictLabel } from "@/utils/ruoyi.js";

const { proxy } = getCurrentInstance();
const {
  bus_recharge_status,
  bus_recharge_method,
  bus_approval_status,
  bus_currency_type,
} = proxy.useDict(
  "bus_recharge_status",
  "bus_recharge_method",
  "bus_approval_status",
  "bus_currency_type"
);

const loading = ref(false);
const tableData = ref([]);
const total = ref(0);

const dateRange = ref([]);
const visible = ref(false);
const recordId = ref("");
const rechargeMoney = ref("");

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    rechargeMethod: undefined,
    rechargeNumber: undefined,
    approvalStatus: undefined,
  },
});

const { queryParams } = toRefs(data);

function handleSearch() {
  queryParams.pageNum = 1;
  getList();
}
function resetSearch() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleSearch();
}

function applyInvoice(row) {
  visible.value = true;
  rechargeMoney.value = row.rechargePrice;
  recordId.value = row.id;
}
function getList() {
  loading.value = true;
  getCustomerRechargeList(
    proxy.addDateRange(queryParams, dateRange.value)
  ).then((res) => {
    loading.value = false;
    tableData.value = res.rows;
    total.value = res.total;
  });
}

onMounted(() => {
  getList();
});
</script>

<style lang="scss">
.search-wrapper {
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}
</style>
